// 声明全局变量 mapboxgl
declare global {
    var mapboxgl: typeof import('mapbox-gl');
}

// 存储 popup 实例
let popupList: { id: string; popup: mapboxgl.Popup }[] = [];

/**
 * 创建 popup
 * @param map - 地图实例
 * @param id - popup 的唯一标识
 * @param coordinates - popup 的经纬度坐标
 * @param content - popup 显示的 HTML 内容
 * @returns 创建好的 popup 实例
 */
export const createPopup = (map: mapboxgl.Map, id: string, coordinates: [number, number], content: string): mapboxgl.Popup => {
    try {
        // 先检查是否已存在同ID的弹窗，如果存在则先移除
        const existingPopup = getPopupById(id);
        if (existingPopup) {
            console.log(`创建弹窗前移除已存在的同ID弹窗: ${id}`);
            closePopup(id);
        }
        
        const offset = {
            top: [0, 0],
            bottom: [0, -10],
            left: [0, 0],
            right: [0, 0],
        };

        // 创建新弹窗
        const popup = new mapboxgl.Popup({
            closeButton: true, // 显示关闭按钮
            closeOnClick: true, // 点击地图时关闭
            offset: offset,
            className: 'custom-popup',
            maxWidth: '300px' // 设置最大宽度
        })
           .setLngLat(coordinates)
           .setHTML(content)
           .addTo(map);
        
        // 监听关闭事件
        popup.on('close', () => {
            console.log(`弹窗 ${id} 关闭事件触发`);
            const index = popupList.findIndex(item => item.id === id);
            if (index !== -1) {
                popupList.splice(index, 1);
                console.log(`弹窗 ${id} 已从列表中移除，当前弹窗数量: ${popupList.length}`);
            }
        });

        // 添加到弹窗列表
        popupList.push({ id, popup });
        console.log(`弹窗 ${id} 已创建，当前弹窗数量: ${popupList.length}`);
        
        return popup;
    } catch (error) {
        console.error(`创建 popup (id: ${id}) 时出错:`, error);
        return null;
    }
};

/**
 * 根据 id 获取 popup
 * @param id - popup 的唯一标识
 * @returns 对应的 popup 实例，如果未找到则返回 null
 */
export const getPopupById = (id: string): mapboxgl.Popup | null => {
    try {
        if (popupList.length === 0) {
            return null;
        }
        const index = popupList.findIndex((m) => m.id === id);
        if (index === -1) {
            return null;
        }
        return popupList[index].popup;
    } catch (error) {
        console.error(`获取 popup (id: ${id}) 时出错:`, error);
        return null;
    }
};

/**
 * 根据 id 更新 popup 内容
 * @param popup - popup 实例
 * @param newContent - 新的 HTML 内容
 */
export const updatePopup = (popup: mapboxgl.Popup, newContent: string): void => {
    try {
        if (popup) {
            popup.setHTML(newContent);
        }
    } catch (error) {
        console.error('更新 popup 内容时出错:', error);
    }
};

/**
 * 根据 id 更新 popup 位置
 * @param id - popup 的唯一标识
 * @param coordinates - 新的经纬度坐标
 */
export const updatePopupPositition = (id: string, coordinates: [number, number]): void => {
    try {
        const popup = getPopupById(id);
        if (popup) {
            popup.setLngLat(coordinates);
        }
    } catch (error) {
        console.error(`更新 popup (id: ${id}) 位置时出错:`, error);
    }
};

/**
 * 打开指定的 popup
 * @param map - 地图实例
 * @param id - popup 的唯一标识
 */
export const openPopup = (map: mapboxgl.Map, id: string): void => {
    try {
        const popup = getPopupById(id);
        if (popup) {
            popup.addTo(map);
        }
    } catch (error) {
        console.error(`打开 popup (id: ${id}) 时出错:`, error);
    }
};

/**
 * 关闭并移除指定的 popup
 * @param id - popup 的唯一标识
 */
export const closePopup = (id: string): void => {
    try {
        const index = popupList.findIndex((item) => item.id === id);
        if (index !== -1) {
            // 确保先移除弹窗
            try {
                popupList[index].popup.remove();
            } catch (removeError) {
                console.error(`移除弹窗 ${id} 时出错:`, removeError);
            }
            
            // 然后从列表中删除
            popupList.splice(index, 1);
            console.log(`弹窗 ${id} 已关闭，当前弹窗列表数量: ${popupList.length}`);
        } else {
            console.log(`未找到ID为 ${id} 的弹窗，当前列表: [${popupList.map(item => item.id).join(', ')}]`);
        }
    } catch (error) {
        console.error(`关闭 popup (id: ${id}) 时出错:`, error);
    }
};

/**
 * 关闭并移除所有 popup
 */
export const closeAllPopup = (): void => {
    try {
        popupList.forEach((item) => {
            item.popup.remove();
        });
        popupList = [];
    } catch (error) {
        console.error('关闭所有 popup 时出错:', error);
    }
};

/**
 * 获取所有 popup 列表
 * @returns 包含所有 popup 实例的数组
 */
export const getAllPopup = (): mapboxgl.Popup[] => {
    try {
        return popupList.map((item) => item.popup);
    } catch (error) {
        console.error('获取所有 popup 列表时出错:', error);
        return [];
    }
};